<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">


        .row.search {
            margin-top: 60px;
        }

        .row.list {
            margin: 60px 0
        }


    </style>
</head>
<body>
<div class="container">
    <div class="row search">
        <div class="col-md-4 col-md-offset-3">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">查询月份：{{year}} -</span>
                <input type="text" class="form-control" placeholder="请输入月份数字" aria-describedby="basic-addon1"
                       maxlength="2" v-model="defaultmonth" @input="handleMonth">
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group">
                <button class="btn btn-info btn-block" @click="search"><i class="glyphicon glyphicon-search"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="row list">
        <template v-for="day in days">
            <div class="col-md-2">
                <div class="panel panel-default">
                    <div class="panel-heading"><h4 class="text-center">{{day.week}}</h4></div>
                    <div class="panel-body"><p class="text-center bg-default"><span
                            class="text-primary">{{day.date}}</span>
                    </p>
                    </div>
                    <div class="panel-footer">
                        <button class="btn btn-default btn-block">详情</button>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>
<script src="../js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '.container',
        data: {
            year: '2017',
            defaultmonth: '6',
            month: '6'
        },
        computed: {
            days: function () {
                var y = parseInt(this.year);
                var m = parseInt(this.month) - 1;
                var d1 = new Date(y, m, 1);
                var d2 = new Date(y, m + 1, 1);
                var weekDay = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                var result = []
                for (var i = d1.getTime(); i < d2.getTime(); i += 24 * 60 * 60 * 1000) {
                    var day = {}
                    day.week = weekDay[new Date(i).getDay()];
                    day.date = new Date(i).getFullYear() + '-' + (new Date(i).getMonth() < 10 ? '0' + (new Date(i).getMonth() + 1) : new Date(i).getMonth(i) + 1) + '-' + (new Date(i).getDate() < 10 ? '0' + new Date(i).getDate() : new Date(i).getDate());
                    result.push(day);
                }
                return result;
            }
        },
        methods: {
            handleMonth: function () {
                this.defaultmonth = this.defaultmonth.replace(/\D/g, '');
            },
            search: function () {
                if (!this.defaultmonth || this.defaultmonth <= 0) {
                    alert('亲，输入月份行不行！')
                } else if (this.defaultmonth > 12) {
                    alert('亲，写日报，不是找bug，还要删除累不累')
                } else {
                    this.month = 4;
                    window.location.href = "";
                }
            }
        }
    })
</script>
</body>
</html>
